<template>
  <view class="sku-number sku-choose-block">
    <view class="sku-choose-block-title"><basic-icons name="icon101" size="32rpx"  padding="0 6rpx 0 0"/>规格与数量</view>
    <view class="sku-item-list" v-for="(normItem, index) in normList" :key="index">
      <view class="sku-row">
        <view class="sku-content">
          <view>
            <text class="sku-name">{{normItem.name}}</text>
            <!-- 价格 -->
            <basic-price :price="normItem.price" size="28rpx" :weight="600" unitSize="28rpx" color="#FF5944" unitColor="#FF5944" />
          </view>
          <!-- 描述 -->
          <text v-if="normItem.remark" class="sku-remark">{{normItem.remark}}</text>
        </view>
        <view class="sku-stepper">
          <u-number-box 
          v-model="normItem.chooseNum"
          :min="normItem.minBookNum || 0"
          :index="index"
          color="#00CBD6"
          disabled-input
          :max="normItem.maxBookNum"
          @change="handleChange"/>
          <view v-if="normItem.minBookNum > 1" class="num-tip">该商品{{normItem.minBookNum}}件起订</view>

          <!--已选数量接近限购数额时显示限购数-->
          <view v-else-if="normItem.maxNum > 0 && normItem.maxNum - normItem.chooseNum < 5" class="num-tip">该商品限购{{normItem.maxNum}}件</view>

          <!-- 库存不足 -->
          <view v-else-if="normItem.inventoryNum > 0 && normItem.inventoryNum - normItem.chooseNum < 5" class="num-tip">剩余库存{{normItem.inventoryNum}}件</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'sku-number',

  props: {
    normList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      skuNumbers: []
    }
  },

  methods:{
    handleChange(e) {
      this.$emit('change', e)
    }
  }
}
</script>
<style lang="less">
.sku-number {
  
  .sku-row {
    .flex;
    .flex-between;

    margin-top: 20rpx;

    .sku-content {
      .flex-1;

      .sku-name {
        margin-right: 30rpx;
      }
      .sku-remark {
        color: @font_desc_color;
        font-size: 24rpx;
      }
    }

    .num-tip {
      color: @price_color;
      font-size: 20rpx;
    }

    .sku-stepper {
      text-align: right;
    }
  }
}
</style>